<template>
  <div class="address-edit-box">
    <s-header :name="`${type === 'add' ? '新增商品' : '编辑商品'}`"></s-header>
    <van-form @submit="onSubmit">
      <van-field
          v-model="good.name"
          name="name"
          label="商品名"
          placeholder="商品名"
          :rules="[{ required: true, message: '请填写商品名' }]"
      />
      <van-field
          v-model="good.introduction"
          name="introduction"
          label="简介"
          placeholder="简介"
          :rules="[{ required: true, message: '请填写简介' }]"
      />
      <van-field
          v-model="good.detail"
          name="detail"
          label="详情"
          placeholder="详情"
          :rules="[{ required: true, message: '请填写详情' }]"
      />
      <van-field
          v-model="good.markedPrice"
          name="markedPrice"
          label="标价"
          placeholder="标价"
          :rules="[{ required: true, message: '请填写标价' }]"
      />
      <van-field
          v-model="good.sellingPrice"
          name="sellingPrice"
          label="售价"
          placeholder="售价"
          :rules="[{ required: true, message: '请填写售价' }]"
      />
      <van-field
          v-model="good.stock"
          name="stock"
          label="库存"
          placeholder="库存"
          :rules="[{ required: true, message: '请填写库存' }]"
      />
      <van-field
          name="headImg"
          label="图片上传"
          placeholder="图片上传"
          :rules="[{ required: true, message: '请上传商品图片' }]"
      >
        <template #input>
          <van-uploader v-model="uploadFileList" :after-read="uploadFile"/>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block color="#1baeae" native-type="submit">保存</van-button>
      </div>

    </van-form>

  </div>
</template>

<script>
import {reactive, onMounted, toRefs} from 'vue'
import {Toast} from 'vant'
import sHeader from '@/components/SimpleHeader'
import {useRoute, useRouter} from 'vue-router'
import {uploadHeadImg} from "@/service/file";
import {addGood, EditGood, getGoodById} from "@/service/good";

export default {
  components: {
    sHeader
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      type: '',
      goodId: '',
      good: {
        goodId: '',
        name: '',
        introduction: '',
        detail: '',
        markedPrice: '',
        sellingPrice: '',
        stock: '',
        pictures: '',
        type: '',
        brand: ''
      },
      uploadFileList: [],
      uploadFilePathList: []

    })

    onMounted(async () => {
      state.type = route.query.type || 'add'
      if (state.type === 'edit') {
        state.goodId = route.query.goodId
        const {good} = await getGoodById({"goodId": state.goodId});
        state.good = good

        const splits = good.pictures.split(',');
        for (const pic of splits) {
          state.uploadFileList.push({
            url: pic
          })
        }
      }
    })

    const onSubmit = async () => {
      state.good.pictures = state.uploadFilePathList.join(',')

      await state.type === 'add' ? addGood(state.good) : EditGood(state.good)
      Toast('保存成功')
      setTimeout(() => {
        router.back()
      }, 1000)
    }

    const uploadFile = async (file) => {
      console.log(file.file)

      const {msg} = await uploadHeadImg({
        "multipartFile": file.file
      })
      state.uploadFilePathList.push(msg)
      console.log(state.uploadFilePathList)
      Toast.success("文件上传成功")
    }

    return {
      ...toRefs(state),
      onSubmit,
      uploadFile
    }
  }
}
</script>

<style lang="less">
@import '../../../common/style/mixin';

.edit {
  .van-field__body {
    textarea {
      height: 26px !important;
    }
  }
}

.address-edit-box {
  .van-address-edit {
    .van-button--danger {
      background: @primary;
      border-color: @primary;
    }

    .van-switch--on {
      background: @primary;
    }
  }
}
</style>
